<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<script type="text/javascript" src="/${initParam.context_root }/etc/js/jquery.js"></script>
<script type="text/javascript">
var form;

function sortSet(value) {
	var chk = sl.selectedIndex;;
	var max = sl.length-1;	//index는 0부터 시작, length는 1부터 시작
	var selTemp = sl.options[chk];
	
	if(value == 1) {
		if(chk > 0) {
			for(var i = chk; i > 0; i--) {
				sl.options[i] = new Option(sl.options[i-1].text, sl.options[i-1].value);
			} 
			sl.options[0] = new Option(selTemp.text, selTemp.value, true, true);
		}
	} else if(value == 2) {
		if(chk > 0) { 
			sl.options[chk] = new Option(sl.options[chk-1].text, sl.options[chk-1].value); 
			sl.options[chk-1] = new Option(selTemp.text, selTemp.value, true, true);
		}
	} else if(value == 3) {
		if(chk < max) { 
			sl.options[chk] = new Option(sl.options[chk+1].text, sl.options[chk+1].value);
			sl.options[chk+1] = new Option(selTemp.text, selTemp.value, true, true);
		}
	} else if(value == 4) {
		if(chk < max) {
			for(var i = chk; i < max; i++) {
				sl.options[i] = new Option(sl.options[i+1].text, sl.options[i+1].value);
			}
			sl.options[max] = new Option(selTemp.text, selTemp.value, true, true);
		}
	}
}

function setSort(){
	form = window.document.form;
	form.method="post";
	
	//controller로 form 안의 선택된 값만 보내기 때문에 다중 선택을 활성화하여 모든 option이 선택되도록 변경
	sl.multiple = true;
	for(var i = 0; i < sl.length; i++) {
		sl.options[i].selected = true;
	}  
	form.action = "/${initParam.context_root }/board/boardSortSave.do";
	//opener.location.href = "/${initParam.context_root }/board/boardManagement.do";
	form.submit();
	window.close();
}

function cancel() {
	close();
}

</script>


<h3 id="title">게시판 표시순서 변경</h3>
<form name='form'>

<table>
	<tr>
		<td>
			<select name="sort" id="sl" size=10 style="width:200px">
				<c:forEach items="${requestScope.sortList }" var="board">
					<option value="${board.id}">${board.title}</option>
				</c:forEach>
				
			</select>
		</td>
		<td align="center">
			<input type="button" value="↑ ↑" onclick="sortSet(1)"><br>
			<input type="button" value=" ↑ " onclick="sortSet(2)"><br>
			<input type="button" value=" ↓ " onclick="sortSet(3)"><br>
			<input type="button" value="↓ ↓" onclick="sortSet(4)">
		</td>
	</tr>
</table>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="button" value="저장" onclick="setSort();"/>
<input type="button" value="취소" onclick="cancel()"/>
</form>